<template>
  <div class="progress-bar" ref="progressBar" @click="progressClick">
    <div class="bar-inner">
      <div class="progress" ref="progress"></div>
      <div class="progress-btn-wrapper"
           @touchstart="progressTouchStart"
           @touchmove="progressTouchMove"
           @touchend="progressTouchEnd"
      >
        <div class="progress-btn" ref="progressBtn"></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {prefixStyle} from 'common/js/dom'

  const transform = prefixStyle('transform')
  const BTN_WIDTH = 16
  export default {
    props: {
      // 播放的比例
      percent: Number,
      default: 0
    },
    created () {
      // 记录手指移动的坐标
      this.touch = {}
    },
    methods: {
      // 手指点击移动btn
      progressClick (e) {
        // 获取点击的距离原始位置的距离
        const rect = this.$refs.progressBar.getBoundingClientRect()
        const offsetWidth = e.pageX - rect.left
        this._offsetWidth(offsetWidth)
        // 释放出去，改变btn位置
        this._trigglePercent()
      },
      // 手指点击
      progressTouchStart (e) {
        //  初始化成功标志
        this.touch.initiated = true
        this.touch.startX = e.touches[0].pageX
        this.touch.left = this.$refs.progress.clientWidth
      },
      // 手指移动
      progressTouchMove (e) {
        // 当未初始化完成，返回false
        if (!this.touch.initiated) {
          return
        }
        // 手指移动的距离
        const deltaX = e.touches[0].pageX - this.touch.startX
        // console.log(e.touches[0].pageX)
        // console.log(deltaX)
        const offsetWidth = Math.min(this.$refs.progressBar.clientWidth - BTN_WIDTH, Math.max(0, deltaX + this.touch.left))
        // 当前应该在的位置
        // 让progress的宽移动到应该在的位置
        this._offsetWidth(offsetWidth)
        this._trigglePercent()
      },
      // 派发改变percnet事件
      _trigglePercent () {
        // 总播放条的宽度
        const progressBarWidth = this.$refs.progressBar.clientWidth - BTN_WIDTH
        // 已播放的宽度
        const percent = this.$refs.progress.clientWidth / progressBarWidth
        this.$emit('percentChange', percent)
      },
      // 手指移动结束
      progressTouchEnd () {
        this.touch.initiated = false
      },
      _offsetWidth (progressWidth) {
        this.$refs.progress.style.width = `${progressWidth}px`
        // 小球移动
        this.$refs.progressBtn.style[transform] = `translate3d(${progressWidth}px,0,0)`
      }
    },
    watch: {
      percent (newPercent) {
        if (newPercent >= 0 && !this.touch.initiated) {
          // 总播放条的宽度
          const progressBarWidth = this.$refs.progressBar.clientWidth - BTN_WIDTH
          // console.log(progressBarWidth)
          // 已播放的宽度
          const progressWidth = newPercent * progressBarWidth
          // console.log(progressWidth)
          this._offsetWidth(progressWidth)
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~common/stylus/variable.styl"
  .progress-bar
    height: 30px

    .bar-inner
      position: relative
      height: 4px
      top: 13px
      background: rgba(0, 0, 0, 0.3)

      .progress
        position: absolute
        height: 100%
        background: $color-theme

      .progress-btn-wrapper
        position: absolute
        width: 30px
        height: 30px
        left: -8px
        top: -13px

        .progress-btn
          position: relative
          top: 7px
          left: 7px
          width: 16px
          height: 16px
          box-sizing: border-box
          border: 3px solid $color-text
          border-radius: 50%
          background: $color-theme
</style>
